<template>
  <div>
    <div v-if="$route.name === 'Exhibition'" class="exhibition combground">
      <div class="container">
        <div class="comtitle">
          <h2 class="comh2">展览活动</h2>
        </div>
        <div class="btns-wrap">
          <div class="all" :class="{ active: cid === 0 }" @click="changeType(0)">
            <img v-if="cid === 0" src="~/assets/images/all-active.png" alt="" />
            <img v-else src="~/assets/images/exhibition-all.png" alt="" />全部
          </div>
          <div class="exhib" :class="{ active: cid === 1 }" @click="changeType(1)">
            <img v-if="cid === 1" src="~/assets/images/exhib-active.png" alt="" />
            <img v-else src="~/assets/images/exhibition-exhib.png" alt="" />展会
          </div>
          <div class="meeting" :class="{ active: cid === 2 }" @click="changeType(2)">
            <img v-if="cid === 2" src="~/assets/images/meeting-active.png" alt="" />
            <img v-else src="~/assets/images/exhibition-meeting.png" alt="" />会议
          </div>
        </div>

        <div class="content">
          <div class="list-wrap">
            <div
              class="item cursor"
              v-for="(item, index) in list"
              :key="index"
              @click="goDetail(item.exhibition_id)"
            >
              <div class="pic-area">
                <span class="top" v-if="item.is_top">置顶</span>
                <span class="time" v-if="!item.is_expire">报名截止时间：{{ item.end_time }}</span>
                <span class="time dateout" v-else>已过期</span>
                <span class="sub">
                  <img
                    v-if="item.cid === 1"
                    src="~/assets/images/exhibition-exhib.png"
                    alt=""
                    class="icon"
                  />
                  <img
                    v-if="item.cid === 2"
                    src="~/assets/images/exhibition-meeting.png"
                    alt=""
                    class="icon"
                  />
                  {{ item.ExhibitionCategory.title }}
                </span>
                <img class="objectCover" :src="item.image_input || '~/assets/images/office-pic.png'" alt="" />
              </div>

              <div class="texts-area">
                <div class="name">{{ item.title }}</div>
                <div class="date-and-position">
                  <div class="date">
                    <img src="~/assets/images/date.png" alt="" />
                    {{ item.start_time }} 至 {{ item.end_time }}
                  </div>
                  <div class="position">
                    <img src="~/assets/images/position.png" alt="" />
                    {{ item.address || "--" }}
                  </div>
                </div>
                <div class="info">
                  {{ item.synopsis }}
                </div>

                <div class="btns" v-if="item.cid == 1">
                  <m-button
                    width="235"
                    style="margin-right: 15px"
                    :class="item.is_expire ? 'dateOut' : ''"
                    @click.stop="join(item.exhibition_id, 1, item.is_expire)"
                    >登记为观众</m-button>
                  <m-button
                    width="235"
                    :class="item.is_expire ? 'dateOut' : ''"
                    @click.stop="join(item.exhibition_id, 2, item.is_expire)"
                    >登记为展商</m-button>
                </div>
                <div class="btns" v-if="item.cid == 2">
                  <m-button
                    width="235"
                    style="margin-right: 15px"
                    :class="item.is_expire ? 'dateOut' : ''"
                    @click.stop="join(item.exhibition_id, 3, item.is_expire)"
                    >报名</m-button
                  >
                </div>
                <div class="share" @click.stop>
                  分享：
                  <Popover
                    placement="top"
                    width="100"
                    height="100"
                    trigger="hover"
                  >
                    <img
                      src="@/assets/images/code.png"
                      width="120px"
                      height="120px"
                      alt=""
                    />
                    <div class="menu-item vx-service" slot="reference">
                      <img class="wechat" src="/images/qq.png" alt="" />
                    </div>
                  </Popover>
                  <Popover
                    placement="top"
                    width="100"
                    height="100"
                    trigger="hover"
                  >
                    <img
                      src="@/assets/images/code.png"
                      width="120px"
                      height="120px"
                      alt=""
                    />
                    <div class="menu-item vx-service" slot="reference">
                      <img class="wechat" src="/images/wechat1.png" alt="" />
                    </div>
                  </Popover>
                  <img
                    class="email"
                    src="/images/email1.png"
                    @click="openEmailDialog(item)"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <nodata message="暂无内容" :status="listStatus"></nodata>
          </div>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
      </div>
      <!-- 邮箱弹窗 -->
      <email-dialog v-model="dialogemail" :title="title">
        <m-form
          ref="form1"
          :model="emailData"
          style="width: 439px"
          :rules="rules"
        >
          <m-form-item label="邮箱" prop="email">
            <m-input
              v-model="emailData.email"
              type="email"
              placeholder="请输入邀请企业邮箱地址"
            />
          </m-form-item>
          <m-form-item label="留言" prop="content">
            <m-input
              v-model="emailData.content"
              placeholder="请输入留言信息"
              type="textarea"
              :rows="5"
            />
          </m-form-item>
          <m-form-item label="展会信息">
            <span>{{dialogData.title}}</span>
          </m-form-item>
          <m-form-item label="活动时间">
            <span>{{dialogData.start_time}} - {{dialogData.end_time}}</span>
          </m-form-item>
          <m-form-item>
            <div style="display: flex; justify-content: center">
              <m-button width="235" @click="handleEmail">确定</m-button>
            </div>
          </m-form-item>
        </m-form>
      </email-dialog>
    </div>
    <router-view v-else />
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton"
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MInput from "@/components/common/m-input/MInput"
import emailDialog from "@/components/emailDialog.vue"
import { Popover } from "element-ui"
import QRCode from "qrcodejs2"
import {
  getExhibitionCate,
  getExhibitionList,
  joinExhibition,
  getEmailSet
} from "@/request/api"

export default {
  name: "Exhibition",
  components: {
    MButton,
    emailDialog,
    MForm,
    MInput,
    Popover,
    MFormItem,
  },
  data() {
    let validateEmail = (rule, value, callback) => {
      if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
        callback(new Error("邮箱格式错误"))
      } else {
        callback()
      }
    }
    return {
      cid: 0,
      category: [],
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 10,
      nowTimeStamp: Date.parse(new Date()) / 1000,
      activeId: null,
      dialogemail: false,
      title: "通过邮件分享",
      emailData: {
        email: "",
        content: ""
      },
      rules: {
        email: [
          {
            require: true,
            message: "邮箱不能为空",
            trigger: blur,
          },
          {
            validtor: validateEmail,
            trigger: blur,
          }
        ],
        content: [
          {
            require: true,
            message: "内容不能为空",
            trigger: blur,
          }
        ]
      },
      dialogData:{}
    }
  },
  created: function () {
    this.getCategory()
  },
  methods: {
    share(type, item) {
      if (type === "qq") {
        window.open(
          "http://connect.qq.com/widget/shareqq/index.html?url=" +
            document.location.href +
            `?sharesource=qzone&title=${item.title}&pics=${item.image_input}&summary=${item.content}`
        )
      }
    },
    openEmailDialog(item) {
      this.dialogemail = true
      this.dialogData = item
    },
    join(id, type, is_expire) {
      if (is_expire) {
        return this.$toastVant.fail("该活动已过期")
      }
      joinExhibition({
        id: id,
        record: type
      }).then(() => {
        this.$toastVant.success("提交成功")
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    changeType(id) {
      this.cid = id
      this.page = 1
      this.getList()
    },
    getCategory() {
      getExhibitionCate().then((res) => {
        if(res.status === 200) {
          this.category = res.data
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        cid: this.cid,
        page: this.page
      }
      getExhibitionList(data).then((res) => {
        var temp = res.data.list
        for (var i in temp) {
          let endtime = this.$common.timeToTimestamp(temp[i].end_time)
          temp[i].is_expire = this.nowTimeStamp > endtime ? true : false
        }
        this.list = temp
        this.total = res.data.count
        if (this.total == 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({ top: 0 })
      })
    },
    goDetail(id) {
      this.$router.push({
        path: "/exhibition/exhibition-details/" + id
      })
    },
    changeThisPage(page) {
      this.page = page
      this.getList()
    },
    creatQrCode() {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: document.location.href,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    handleEmail() {
      this.$refs.form1.$refs.mForm.validate((valid) => {
        if (valid) {
          getEmailSet(this.emailData).then((res) => {
            if (res.status === 200) {
              this.$toastVant.success(res.message)
              this.dialogemail = false
            }
          }).catch((err) => {
            this.$toastVant.fail(err.message)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.exhibition {
  padding: 60px 0 80px 0;
  color: #666;

  .btns-wrap {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    font-size: 20px;

    > div {
      cursor: pointer;
      display: flex;
      align-items: center;

      img {
        margin-right: 5px;
      }
    }

    .all,
    .exhib {
      margin-right: 80px;
    }

    .active {
      color: $theme-color-1;
    }
  }

  .content {
    margin-top: 50px;
    background-color: #fff;
    padding: 30px;

    .list-wrap {
      .item {
        width: 48%;
        margin-right: 4%;
        height: 580px;
        display: inline-block;
        margin-bottom: 30px;

        .pic-area {
          position: relative;
          line-height: 0;

          > img {
            width: 100%;
            height: 290px;
          }

          .top {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #fff;
            width: 72px;
            height: 30px;
            background-color: rgb(55, 166, 214);
            border-radius: 14px;
            line-height: 30px;
            text-align: center;
          }

          .time {
            position: absolute;
            top: 0;
            right: 0;
            background-color: $theme-color-1;
            opacity: 0.8;
            width: 306px;
            height: 49px;
            line-height: 49px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }

          .dateout {
            background-color: #444;
          }

          .sub {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 99px;
            height: 45px;
            background-color: #000;
            opacity: 0.7;
            color: #fff;
            line-height: 45px;
            text-align: center;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 24px 0 0 24px;

            .icon {
              width: 23px;
              height: 23px;
              margin-right: 5px;
            }
          }
        }

        .texts-area {
          height: calc(100% - 290px);
          padding: 15px;
          background-color: rgb(243, 244, 247);
          position: relative;

          .name {
            margin-bottom: 15px;
            font-size: 20px;
          }

          .date-and-position {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            .date,
            .position {
              display: flex;
              align-items: center;

              img {
                margin-right: 5px;
              }
            }
          }

          .info {
            height: 65px;
            font-size: 16px;
            @include text-omitted(3);
            margin-bottom: 15px;
          }

          .btns {
            display: flex;
            justify-content: center;

            .dateOut {
              /deep/ .el-button {
                background: #888 !important;
              }
            }
          }

          .share {
            position: absolute;
            bottom: 15px;
            right: 15px;
            display: flex;
            align-items: center;

            .show_wx_img {
              width: 100px;
              height: 100px;
              object-fit: contain;
            }

            .qq,
            .wechat,
            .email {
              margin-left: 5px;
              margin-right: 10px;
            }

            .meet {
              width: 50px;
              height: 50px;
              position: absolute;
              bottom: 40px;
              left: 60px;
              // opacity: 0;
            }

            // .qr {
            // 	position: absolute;
            // 	bottom:20px;
            // 	right: 20px;
            // 	z-index: 999;
            // }
          }
        }
      }

      .item:nth-of-type(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>
